<link rel="stylesheet" href="<%= linkPath %>/css/main.css" />
<!-- main-nav -->
<div class="main-nav navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" title="有求必孕">
                <h1><img class="img-responsive" src="<%= linkPath %>/images/logo.png" alt="有求必孕logo"></h1>
            </a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right text-center">
                <li class="scroll"><a class="mainA" href="/">首页</a></li>
                <li class="scroll nav-box swidth" >
                    <a class="mainA" href="#">产品优势</a>
                    <ul class="li-nav text-center hide">
                        <li><a href="javascript:;">全球方案</a></li>
                        <li><a href="javascript:;">金融分期</a></li>
                        <li><a href="javascript:;">保险定制</a></li>
                        <li><a href="/testing" target="_blank">试管成功率测试</a></li>
                    </ul>
                </li>
                <li class="scroll nav-box">
                    <a class="mainA" href="#">服务方案</a>
                    <ul class="li-nav text-center hide twidth">
                        <li><a href="/consumers">服务对象</a></li>
                        <li><a href="/process">项目流程</a></li>
                    </ul>
                </li>
                <li class="scroll"><a class="mainA" href="/mechanism">合作医院</a></li>
                <li class="scroll"><a class="mainA" href="/example">案例</a></li>
                <li class="scroll nav-box">
                    <a class="mainA" href="/about">关于我们</a>
                    <!--<ul class="li-nav text-center hide twidth">-->
                        <!--<li><a href="javascript:;">公司简介</a></li>-->
                        <!--<li><a href="javascript:;">咨询动态</a></li>-->
                        <!--<li><a href="javascript:;">联系我们</a></li>-->
                    <!--</ul>-->
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- main-nav -->
<script>
    var winWidth = $(window).width();
    var router = window.location.pathname;
    $("a[href='"+ router +"']").parents('li').addClass('active');
    if(router == '/hospital'){
        $("a[href='/mechanism']").parent('li').addClass('active');
    }else if(router == '/example/detail'){
        $("a[href='/example']").parent('li').addClass('active');
    }
    //给二级导航注册hover事件
    if(winWidth > 768){
        $('.nav-box').on("mouseenter",function () {
            $(this).find('.li-nav').removeClass('hide');
        }).on("mouseleave",function () {
            $(this).find('.li-nav').addClass('hide');
        });
        $('.li-nav li').on("mouseenter",function(){
            $(this).addClass('active');
        }).on("mouseleave",function(){
            $('.li-nav li').removeClass('active');
        });
    }


    $('.main-nav .navbar-nav .scroll').on('click',function(){
        var idx =  $(this).index();
        $('.main-nav .navbar-nav .scroll').removeClass('active');
        $('.main-nav .navbar-nav .scroll').eq(idx).addClass('active');
        $('.li-nav').addClass('hide');
        if($(this).hasClass('nav-box')){
            $('.li-nav').addClass('hide');
            $(this).find('.li-nav').removeClass('hide');
        }
    })

    var isOverTopdist = function () {
        var scrollTop = $(window).scrollTop();
        if( scrollTop > 30 ){
            $('.main-nav').addClass('navbar-fixed-top');
        } else {
            $('.main-nav').removeClass('navbar-fixed-top');
        }
    }
    isOverTopdist();
    //Scroll Menu
    $(window).on('scroll', function(){
        isOverTopdist();
    });


</script>

